<!-- 服务导航 -->
<template>
    <div class="mainContent">
        <ul class="serviceNav">
            <li class="title" :class="{ 'active': router.currentRoute.value.path == '/user/userPosts'}"><router-link tag="a" to="/user/userPosts">我的帖子</router-link></li>
            <li class="title" :class="{ 'active': router.currentRoute.value.path == '/user/collectAngling'}"><router-link tag="a" to="/user/collectAngling">钓场收藏</router-link></li>
            <li class="title" :class="{ 'active': router.currentRoute.value.path == '/user/userAngling'}"><router-link tag="a" to="/user/userAngling">我的钓场</router-link></li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
    import { useRouter } from 'vue-router'
    
    const router = useRouter();
</script>

<style scoped lang="scss">
.mainContent{
    
    .serviceNav {
        height: 46px;
        background-color: #f7f8fa;
        font-size: 15px;
        padding-left:50px;
        border-radius: 5px;
        &:after{
            height: 30px;
            width: 100%;
            position: absolute;
            top: 0px;
        }
        li{
            list-style: none;
        }
        ul{
            padding: 0;
        }
        .title {
            float: left;
            padding: 0 15px;
            height: 46px;
            line-height: 46px;
            cursor: pointer;
            position: relative;
            a {
                color: #86909c;
                &:hover {
                    color: #409eff;
                }
            }
        }
        .active {
            background-color: #f1f1ff;
            cursor: default;
            box-shadow:4px 0 3px -4px rgba(0,0,0,.06),-4px 0 3px -4px rgba(0,0,0,.06);
            a{
                color: #6b7785;
            }
        }
        .more{
            color: #86909c;
            .icom{
                margin-left: 5px;
                position: relative;
                top: 3px;
            }
        }
    }
}


</style>